<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <HmHeader @addList="addList" />
    <!-- 主体部分 -->
    <HmMain :list="showList" @delList="delList" @changeChecked="changeChecked" @chooseAll="chooseAll"/>
    <!-- 底部部分 -->
    <HmFooter
      :leftLength="leftLength"
      @delAllDone="delAllDone"
      :status="status"
      @changeStatus="changeStatus"
      :listLength="listLength"
    />
  </section>
</template>

<script>
import HmHeader from '@/components/HmHeader.vue'
import HmMain from '@/components/HmMain.vue'
import HmFooter from '@/components/HmFooter.vue'
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('todos')) || [] ,
      status: 'selected'
    }
  },
  methods: {
    //删除功能
    delList (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    //改选择状态
    changeChecked (id) {
      const obj = this.list.find(item => item.id === id)
      // console.log(obj);
      obj.isDone = !obj.isDone
    },
    //增加功能
    addList (value) {
      const obj = { id: +new Date(), name: value, isDone: false }
      this.list = [obj, ...this.list]
    },
    //清除已完成
    delAllDone () {
      this.list = this.list.filter(item => !item.isDone)
    },
    changeStatus (value) {
      this.status = value
    },
    chooseAll(){
      this.list.forEach(item=>item.isDone=this.checkAllType)
    }
  },
  //计算属性
  computed: {
    leftLength () {
      return this.list.filter(item => !item.isDone).length
    },
    showList () {
      switch (this.status) {
        case 'selected':
          return this.list
        case 'active':
          return this.list.filter(item => !item.isDone)
        case 'completed':
          return this.list.filter(item => item.isDone)
        default:
          return this.list
      }
    },
    listLength(){
      return this.list.length
    },

  },
  //监听属性
  watch:{
    list:{
      deep:true,
      immediate:true,
      handler(value){
        localStorage.setItem('todos',JSON.stringify(value))
      }
    }
  }
}
</script>

<style></style>
